<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/weuix.css"/>

    <script src="../js/zepto.min.js"></script>
    <script>
        $(function(){
            $('.collapse .js-category').click(function(){
                $parent = $(this).parent('li');
                if($parent.hasClass('js-show')){
                    $parent.removeClass('js-show');
                    $(this).children('i').removeClass('icon-35').addClass('icon-74');
                }else{
                    $parent.siblings().removeClass('js-show');
                    $parent.addClass('js-show');
                    $(this).children('i').removeClass('icon-74').addClass('icon-35');
                    $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
                }
            });

        });

    </script>
</head>

<body ontouchstart class="page-bg">
<div class="page-hd">
    <h1 class="page-hd-title">
        折叠面板
    </h1>
    <p class="page-hd-desc">首页就是这个效果,可单独一个使用</p>
</div>
<div class="page-bd">
    <div class="weui-cells__title">列表</div>
    <ul class="collapse">
        <li><div class="weui-flex js-category" >
            <div class="weui-flex__item" >您喜欢的美女是谁?</div>
            <i class="icon icon-74"></i>
        </div>
            <div class="page-category js-categoryInner">

                <div class="weui-cells page-category-content">
                    <a class="weui-cell weui-cell_access" href="JavaScript:;">
                        <div class="weui-cell__bd">
                            <p>杨超越</p>
                        </div>
                        <div class="weui-cell__ft"></div>
                    </a>
                    <a class="weui-cell weui-cell_access" href="JavaScript:;">
                        <div class="weui-cell__bd">
                            <p>柳岩</p>
                        </div>
                        <div class="weui-cell__ft"></div>
                    </a>
                </div></div>
        </li>

        <li><div class="weui-flex js-category" >
            <div class="weui-flex__item" >谁才是最富有公司?</div>
            <i class="icon icon-74"></i>
        </div>
            <div class="page-category js-categoryInner">

                <div class="weui-cells page-category-content">
                    <a class="weui-cell weui-cell_access" href="JavaScript:;">
                        <div class="weui-cell__bd">
                            <p>腾讯科技</p>
                        </div>
                        <div class="weui-cell__ft"></div>
                    </a>
                    <a class="weui-cell weui-cell_access" href="JavaScript:;">
                    <div class="weui-cell__bd">
                        <p>阿里巴巴科技</p>
                    </div>
                    <div class="weui-cell__ft"></div>
                </a>
                    <a class="weui-cell weui-cell_access" href="JavaScript:;">
                        <div class="weui-cell__bd">
                            <p>谷歌科技</p>
                        </div>
                        <div class="weui-cell__ft"></div>
                    </a>
                </div></div>
        </li>
        
    </ul>
    <div class="weui-cells__title">组合使用</div>
    <ul class="collapse">
        <li><div class="weui-flex js-category" >
        <div class="weui-flex__item" >美女</div>
        <i class="icon icon-74"></i>
    </div>
        <div class="page-category js-categoryInner">

            <div class="weui-cells page-category-content">
                <p class="content">美女是一个汉语词汇，拼音是měi nǚ，指容貌姣好、仪态优雅的女子。中国古代关于美女的形容词和诗词歌赋众多，形成了丰富的美学资料.</p>

            </div></div>
    </li>
        <li><div class="weui-flex js-category" >
            <div class="weui-flex__item" >王者荣耀</div>
            <i class="icon icon-74"></i>
        </div>
            <div class="page-category js-categoryInner">

                <div class="weui-cells page-category-content">
                    <p class="content">《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类手机游戏，于2015年11月26日在Android、IOS平台发布.</p>

                </div></div>
        </li>
    </ul>

    <div class="weui-cells__title">单独使用</div>
    <ul class="collapse">
        <li><div class="weui-flex js-category" >
            <div class="weui-flex__item" ><i class="icon icon-2 f20"></i> 使用说明</div>
            <i class="icon icon-74"></i>
        </div>
            <div class="page-category js-categoryInner">

                <div class="weui-cells page-category-content">
                  <p class="content">美女是一个汉语词汇，拼音是měi nǚ，指容貌姣好、仪态优雅的女子。中国古代关于美女的形容词和诗词歌赋众多，形成了丰富的美学资料.</p>

                </div></div>
        </li>
    </ul>
</div>

<div class="weui-footer weui-footer_fixed-bottom">
    <p class="weui-footer__links">
        <a href="../index.html" class="weui-footer__link">WeUI首页</a>
    </p>
    <p class="weui-footer__text">Copyright &copy; Yoby</p>
</div>
</body>
</html>